<template>
  <div>
        <section class="menu-block">
            <h2>存储数据</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>{{setStorageCode}}</code>
                </pre>
                <van-cell-group>
                    <van-field v-model="setStorageKey" label="key" placeholder="请输入若干字符" />
                    <van-field v-model="setStorageValue" label="value" placeholder="请输入若干字符" />
                </van-cell-group>
                <van-button size="large" type="primary" @click="setStorageClick">点击存储数据</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>获取数据</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>{{getStorageCode}}</code>
                </pre>
                <van-cell-group>
                    <van-field v-model="getStorageKey" label="key" placeholder="请输入若干字符" />
                </van-cell-group>
                <van-button size="large" type="primary" @click="getStorageClick">点击获取存储数据</van-button>
                <code>存储数据：{{ getStorageValue }}</code>
            </div>
        </section>
        <section class="menu-block">
            <h2>删除数据</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>{{rmStorageCode}}</code>
                </pre>
                <van-cell-group>
                    <van-field v-model="rmStorageKey" label="key" placeholder="请输入若干字符" />
                </van-cell-group>
                <van-button size="large" type="primary" @click="rmStorageClick">点击删除存储数据</van-button>
                <code>被删除的数据：{{ rmStorageValue }}</code>
            </div>
        </section>
        <section class="menu-block">
            <h2>清空存储数据</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>{{clearStorageCode}}</code>
                </pre>
                <van-button size="large" type="primary" @click="clearStorageClick">点击清空存储数据</van-button>
            </div>
            <p> </p>
        </section>
  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify} from 'vant'
import {storage} from 'MTHybrid'

export default {
    data () {
        return {
            setStorageCode: 'import {sotrage} from \'fzHybrid\'\n...\n//返回数据： true 表示存储成功,反之表示存储失败\nvar result = storage.set(key, value);',
            setStorageKey: '',
            setStorageValue: '',
            getStorageCode: 'import {sotrage} from \'fzHybrid\'\n...\n//key不存在时，返回null，key存在，返回value值\nvar data = storage.get(key);',
            getStorageKey: '',
            getStorageValue: '',
            rmStorageCode: 'import {sotrage} from \'fzHybrid\'\n...\n//返回数据: 当被删除的key不存在，返回null，key存在，删除时返回value值\nvar data = storage.remove(key);',
            rmStorageKey: '',
            rmStorageValue: '',
            clearStorageCode: 'import {sotrage} from \'fzHybrid\'\n...\n//返回数据: true表示清空成功，反之表示清空失败\nvar result = storage.clear();'
        }
    },
    methods: {
        setStorageClick () {
            var result = storage.set(this.setStorageKey, this.setStorageValue)
            if (result) {
                Notify({
                    message: 'set成功',
                    duration: 2000,
                    background: '#1989fa'
                })
            } else {
                Notify({
                    message: 'set失败',
                    duration: 2000,
                    background: '#ee0000'
                })
            }
        },
        getStorageClick () {
            var data = storage.get(this.getStorageKey)
            this.getStorageValue = data
            Notify({
                message: 'get成功',
                duration: 2000,
                background: '#1989fa'
            })
        },
        rmStorageClick () {
            var data = storage.remove(this.rmStorageKey)
            this.rmStorageValue = data
        },
        clearStorageClick () {
            var result = storage.clear()
            if (result) {
                Notify({
                    message: 'clear成功',
                    duration: 2000,
                    background: '#1989fa'
                })
            } else {
                Notify({
                    message: 'clear失败',
                    duration: 2000,
                    background: '#ee0000'
                })
            }
        }
    },
    components: {
        [Button.name]: Button,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Notify.name]: Notify
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
